/**
  @date: 2019年6月26日15:21:23
  @latest updates: 2019年6月26日15:21:29
  @author: liump
  @desc: 设备 点操作弹框组件
  @param type:
    工作内容级联需要的参数
    原有分光器 D-OFGQ
    新立分光器 D-NFGQ
 */
<template>
  <el-card class="amap-equipment-work-dialog">
    <div slot="header" class="clearfix">
      <span>工作内容</span>
      <span @click="handleAddEquipmentWork">
        <i class="el-icon-plus"></i>
        <span class="clearfix-add-work">添加内容</span>
      </span>
    </div>
    <el-form>
      <el-form-item v-for="(item, index) of equipmentWork_list" :key="item.id">
        <el-col :span="2">
          <el-button
            icon="el-icon-minus"
            circle
            size="mini"
            @click="handleSpliceEquipmentWork(index)"
          ></el-button>
        </el-col>
        <el-col :span="13">
          <el-cascader
            :options="options"
            @focus="handleChangeEquipment(index)"
            v-model="item.optionId"
          ></el-cascader>
        </el-col>
        <el-col :span="4">数量:</el-col>
        <el-col :span="5">
          <el-input-number v-model="item.num" size="mini" :controls="false" class="input-number" :min="1" @blur="handleBlurNum(item)"></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleEquipmentWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleEquipmentWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'amapEquipmentWorkDialog',
  props: {
    point_id: Number
  },
  data() {
    return {
      // 级联树形结构
      options: [
        {
          label: '打手井',
          value: 1,
          unit: '',
          children: [
            {
              label: '埋式',
              value: 54,
              unit: '',
              children: [
                {
                  label: '6芯',
                  value: 1007,
                  unit: '米'
                }
              ]
            }
          ]
        },
        {
          label: '开挖PVC110管',
          value: 2,
          unit: '',
          childred: []
        }
      ],
      // 工作内容集合
      equipmentWork_list: [
        {
          id: 0,
          optionId: [], // 工作内容的对应的 optionId
          workMessage: [], // 工作内容文本
          num: 1, // 数量,默认1
          unit: []
        }
      ],
      index: 0, // 当前行的序列
      lnglat: '', // 当前节点经纬度
      line: '' // 当前节点的tag,用于表格渲染及接口参数
    }
  },
  methods: {
    /**
     * 弹框中删除按钮的方法
     * @date 2019年6月26日15:26:23
     * @author liump
     * @method handleSpliceEquipmentWork
     * @param { Number } index 数组下标
     */
    handleSpliceEquipmentWork(index) {
      this.equipmentWork_list.splice(index, 1)
    },
    /**
     * 获取工作内容的行序号(下标)
     * @method handleChangeEquipment
     * @author liump
     * @param {Number} index 行数据的序列
     */
    handleChangeEquipment(index) {
      this.index = index
    },
    /**
     * 弹框中添加内容按钮点击事件
     * @method handleAddEquipmentWork
     * @author liump
     */
    handleAddEquipmentWork() {
      let len = this.equipmentWork_list.length
      let obj = {
        id: len,
        optionId: [],
        workMessage: [],
        num: 1,
        unit: []
      }
      this.equipmentWork_list.push(obj)
    },
    /**
     * 初始化数组,用于在弹框开启的时候清空数据
     * @method handleInitData
     */
    handleInitData() {
      let obj = {
        id: 0,
        optionId: [],
        workMessage: [],
        num: 1,
        unit: []
      }
      this.equipmentWork_list = []
      this.equipmentWork_list.push(obj)
    },
    /**
     * 获取节点经纬度的方法
     * @method getLnglat
     * @author liump
     * @parma { Array } lnglat 节点经纬度
     */
    getLnglat(lnglat) {
      this.lnglat = lnglat.join(',')
    },
    /**
     * 获取节点tag的方法
     * @method getTag
     * @author liump
     * @param { String } line 节点tag
     */
    getTag(line) {
      this.line = line
    },
    /**
     * 确认按钮,向父组件传递数据的方法
     * @method handleEquipmentWorkConfirm
     */
    handleEquipmentWorkConfirm() {
      // 遍历树形结构找到单位 unit
      let getUnit = (data, optionId, unit) => {
        for (var i in data) {
          if (data[i].value == optionId) {
            unit.push(data[i].unit)
            break
          } else {
            getUnit(data[i].children, optionId, unit)
          }
        }
      }

      // 初始化传递数组
      let data = []
      // 初始化设备数据
      let equipmentInit = () => {
        let obj = {}
        obj.at_point = 0 // 操作点,垂直使用(点操作必须)
        obj.start_point = 0 // 操作点,水平使用(点操作为0)
        obj.end_point = 0 // 操作点,水平使用(点操作为0)
        obj.work_direction = 1 // 工作方向,0水平/1垂直(点操作为垂直)
        obj.work_length = 0 // 工作长度
        obj.work_option = '' // 工作内容最后一级的 optionId
        obj.work_type = 3 // 工作类型,1管道,2光缆,3设备,4熔纤
        obj.workload = 1 // 数量
        ;(obj.line = ''), // 线程渲染数据
          (obj.equipment_point = '') // 设备点渲染数据

        return obj
      }

      // 通过 optionId 获得 工作内容文本
      this.equipmentWork_list.forEach((el, index) => {
        // 遍历树形结构找到optionId对应的工作内容文本,并对 workMessage 赋值
        el.optionId.forEach(elem => {
          this.getArray(this.options, elem, el.workMessage)
        })
        el.workMessage = el.workMessage.join(' | ')

        // 根据工作内容级联的最后一级找到最后一级对应的单位
        let perentId = el.optionId[el.optionId.length - 1]
        getUnit(this.options, perentId, el.unit)
        el.unit = el.unit[0]

        Object.assign(el, equipmentInit())
        el.work_option = el.optionId[el.optionId.length - 1]
        el.workload = parseInt(el.num)
        el.at_point = this.point_id
        el.lnglat = this.lnglat
        el.line = this.line
      })
      console.log(
        'TCL: handleEquipmentWorkConfirm -> this.equipmentWork_list',
        this.equipmentWork_list
      )

      this.$emit('handleEquipmentWorkConfirm', this.equipmentWork_list)
    },
    /**
     * 取消按钮,向父组件传值的方法
     */
    handleEquipmentWorkCancel() {
      let data = {
        point_id: this.point_id,
        confirm: false,
        show: false
      }
      this.$emit('handleEquipmentWorkCancel', data)
    },
    /**
     * 遍历树形结构,根据树形结构找到指定的工作内容文本
     * @method getArray
     * @param { Array } data 要遍历的树形数组
     * @param { String } optionId 指定条件
     * @param { Array } list 工作内容数组,向该数组中 push 工作内容
     */
    getArray(data, optionId, list) {
      for (var i in data) {
        if (data[i].value == optionId) {
          // 在 workMessage 数组中添加 label
          list.push(data[i].label)
          break
        } else {
          this.getArray(data[i].children, optionId, list)
        }
      }
    },
    /**
     * 请求工作内容级联数据
     * @method getEquipmentWorkData
     * @author liump
     * @param { String } pointType 接口参数需要的类型
     */
    getEquipmentWorkData(pointType) {
      let success = res => {
        res = res.data
        if (res.flag == 1) {
          let data = res.data
          this.options = res.data
        }
        // this.options = res.data // 测试的模拟数据
      }
      let error = res => {}
      let data = {
        iconType: pointType
      }
      let param = {
        url: '/api/web/ptwo/getWorkOptRela',
        methods: 'post',
        data: data,
        success: success,
        error: error
      }
      this.$https(param)
      // mock的模拟数据
      // this.$axios.get("/mock/amapWorkMessage.json")
      //   .then(res => {
      //     success(res);
      //   });
    },
    /**
     * 当数量失去焦点的时候如果没有值补全值
     * @method handleBlurNum
     * @author liump
     */
    handleBlurNum(item){
      if (!item.num) {
        item.num = 1
      }
    }
  },
  mounted() {
    // this.getLineWorkData()
  }
}
</script>

<style scoped>
.amap-equipment-work-dialog {
  width: 300px;
  z-index: 100;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 12px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.clearfix span:nth-child(2) {
  cursor: pointer;
}
.clearfix-add-work {
  margin-left: 2px;
}
.amap-equipment-work-dialog .input-number{
  width: 100%;
}
</style>

<style>
/* 弹框样式修改 */
/* 弹框card 内边距 */
.amap-equipment-work-dialog .el-card__body {
  padding: 8px;
}
/* 删除工作内容按钮 */
.amap-equipment-work-dialog .el-button--mini.is-circle {
  padding: 3px;
}
/* 调整每行的外边距 */
.amap-equipment-work-dialog .el-form-item {
  margin-bottom: 6px;
}
/* 调整确认取消按钮 */
.amap-equipment-work-dialog .el-button {
  padding: 6px 18px;
  font-size: 12px;
}
.amap-equipment-work-dialog .el-input__inner,
.amap-equipment-work-dialog .el-cascader .el-input__inner {
  height: 30px;
}
.amap-equipment-work-dialog .el-col {
  font-size: 12px;
}
.amap-equipment-work-dialog .item_input > input {
  padding: 0;
  text-align: center;
}
</style>


